<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link
          ref="tag"
          tag="span"
          class="tags-view-item active"
          :to="{ path: '/' }"
        >
          生产计划进度详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle
          title="实际计划分类完成度"
          class="float margin"
          style="width: 36.5%"
        >
          <div class="flex_center">
            <ElementRadio
              :options="RadioOptions"
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
          </div>
          <div class="Echarts">
            <div class="calculagraph_left">
              <Ring style="width: 45%; height: 80%" :data="top1.zjh" />
              <div class="label">总计划</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem title="消耗总量" :number="top1.xh" />
              <StrokeItem title="上月" :number="top1.sy" />
              <StrokeItem title="环比" :number="top1.hb" unit="%" />
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle
          title="实际计划分类统计"
          class="float margin"
          style="width: 36.5%"
        >
          <div class="flex_center">
            <ElementRadio
              :options="RadioOptions"
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
          </div>
          <XRow class="Echarts" barLeft="7%" barRight="17%" :data="top2"></XRow>
        </StrokeTitle>
        <StrokeTitle
          title="计划产能占比"
          class="float margin"
          style="width: 24%"
        >
          <div class="flex_center">
            <ElementRadio
              :options="RadioOptions"
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList"
            />
          </div>
          <div class="flex_center Echarts">
            <PieImg
              legendLeft="53%"
              cirLeft="0.7"
              itemWidth="0.94"
              length="3"
              :data="top3"
              :img="require('@/assets/images/echarts/zbjhzb.png')"
            />
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle
          title="销售计划与实际计划比值统计"
          class="float margin"
          style="width: 36.5%"
        >
          <div class="flex_center">
            <ElementRadio
              :options="RadioOptions"
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
          </div>
          <div class="flex_center Echarts">
            <div class="water_box">
              <div class="water flex_center">{{ center1.number }}</div>
              <div class="label">销售产值：实际产值</div>
              <div class="backBor"></div>
            </div>
            <!-- <Water  style="width:38%"/> -->
            <MoreDirection
              gridLeft="8%"
              :ySplitLineShow="true"
              :isUnit="false"
              :data="center1.list"
              :legendData="['已完成']"
              style="height: calc(100% - 0px); width: 64%"
            />
          </div>
        </StrokeTitle>
        <StrokeTitle
          title="各基地计划产量占比"
          class="float margin"
          style="width: 36.5%"
        >
          <div class="flex_center">
            <ElementRadio
              :options="RadioOptions"
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
          </div>
          <div class="flex_center Echarts">
            <PieImg
              style="height: 170px"
              legendLeft="41%"
              length="10"
              itemWidth="0.94"
              cirLeft="0.7"
              :img="require('@/assets/images/echarts/zbscjh.png')"
            />
          </div>
        </StrokeTitle>
        <StrokeTitle
          title="未完成计划产成品占比"
          class="float margin"
          style="width: 24%"
        >
          <div class="flex_center">
            <ElementRadio
              :options="RadioOptions"
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList"
            />
          </div>
          <div class="flex_center Echarts">
            <MoreRing legendLeft="56%" length="5" :data="center3" />
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle
          title="当月产能统计"
          class="float margin"
          style="width: 99%"
        >
          <div class="flex_center">
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList"
            />
          </div>
          <MoreDirection
            :isCategory="false"
            :isUnit="false"
            :yAxisLineShow="true"
            :xAxisLineShow="true"
            :data="bottom1"
            :legendData="['已完成']"
            barWidth="21"
            style="height: calc(100% - 50px)"
          />
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      //实际计划分类完成度
      top1: {
        zjh: { num: "353224", baifenbi: "22" },
        xh: "22222",
        sy: "334444",
        hb: "-22",
      },
      top2: [
        { name: "产品一", value: "123" },
        { name: "产品二", value: "221" },
        { name: "产品三", value: "123" },
        { name: "产品四", value: "124" },
        { name: "产品五", value: "124" },
      ],
      top3: [
        { name: "产品一", value: 123 },
        { name: "产品二", value: 221 },
        { name: "产品三", value: 123 },
        { name: "产品四", value: 124 },
        { name: "产品五", value: 124 },
        { name: "产品1五", value: 124 },
      ],
      center1: {
        number: 1.3,
        list: [
          { name: "仰口", value1: 33 },
          { name: "北龙口", value1: 53 },
          { name: "崂峰口", value1: 78 },
          { name: "崂东口", value1: 12 },
          { name: "崂泉口", value1: 90 },
          { name: "崂石口", value1: 12 },
          { name: "崂河口", value1: 90 },
        ],
      },
      center3: [
        { name: "产品一", value: 123 },
        { name: "产品二", value: 221 },
        { name: "产品三", value: 123 },
        { name: "产品四", value: 124 },
      ],
      bottom1: [
        { name: "1号", value1: 33 },
        { name: "2号", value1: 53 },
        { name: "3号", value1: 78 },
        { name: "4号", value1: 52 },
        { name: "5号", value1: 90 },
        { name: "6号", value1: 12 },
        { name: "7号", value1: 90 },
        { name: "8号", value1: 78 },
        { name: "9号", value1: 82 },
        { name: "10号", value1: 90 },
        { name: "11号", value1: 12 },
        { name: "12号", value1: 90 },
        { name: "13号", value1: 78 },
        { name: "14号", value1: 12 },
        { name: "15号", value1: 90 },
        { name: "16号", value1: 12 },
        { name: "17号", value1: 90 },
      ],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_top {
      //   background: red;
      width: 100%;
      height: 30.9%;
    }
    .Echarts {
      height: calc(100% - 50px);
      .water_box {
        width: 33%;
        height: 95%;
        // background: red;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        .water {
          background: url("../../assets/images/echarts/water (2).png");
          background-size: 100% 100%;
          width: 110px;
          height: 110px;
          font-size: 36px;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          text-align: left;
          color: #ffffff;
        }
        .label {
          margin-top: 20px;
        }
        .backBor {
          background: url("../../assets/images/echarts/11.png");
          background-size: 100% 100%;
          position: absolute;
          right: 2%;
          width: 1px;
          height: 80%;
          top: 5%;
        }
      }
      .calculagraph_right,
      .calculagraph_left {
        width: 40%;
        height: 100%;
        // background: red;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        float: left;
        margin-left: 8%;
      }
      .calculagraph_right {
        align-items: flex-start;
        justify-content: center;
        width: 35%;
        height: 95%;
        margin-left: 0%;
      }
    }
  }
}
</style>